// AJAJXS LESS 样式库 基础库，该文件应该通过 @import 'common_style'; 被引入。

/*
-------------------------
常见样式类
-------------------------
*/
.left{
	float:left;
}
.right{
	float:right;
}
.centerBody (@defaultWidth: 1300px) {
	max-width: @defaultWidth;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

// 水平线
.ajaxjs-hr, .aj-hr {
	margin: 1% auto;
	border: 0;
	border-top: 1px solid lightgray;
	border-bottom: 1px solid #fff;
	clear: both;
}

.aj-center-title{
	text-align:center;
	font-size:1.3rem;
	font-weight:bold;
	letter-spacing:5px;
	padding:5% 0;
}

// 快速制作1px 表格边框，为需要设置的table元素加上border的class即可
.ajaxjs-borderTable, .aj-table {
	border: 1px lightgray solid;
	border-collapse: collapse;
	border-spacing: 0;
	th {
		background-color: #efefef;
		letter-spacing: 3px;
	}

	td , th {
		border: 1px lightgray solid;
		line-height: 160%;
		height: 120%;
		padding: 6px;
	}

	tr {
		.transition (background-color 400ms ease-out);
		&:nth-child(even) {
			background: #f5f5f5;
			box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
		}
		&:hover {
			background-color: #fbf8e9;
		}
	}

}

.ajaxjs-niceTable {
	border-spacing: 0;
	border: solid #ccc 1px;
	border-radius: 6px;
	box-shadow: 0 1px 1px #ccc;
	td , th {
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		padding: 10px;
		text-align: center;
	}
	
	tbody {
		tr {
			.transition (background-color 700ms ease-in-out);

			&:nth-child(even) {
				background: #f5f5f5;
				box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
			}
			
			&:last-child {
				td:first-child {
					border-radius: 0 0 0 6px;
				}
	
				td:last-child {
					border-radius: 0 0 6px 0;
				}
			}
			
			&:hover {
				background-color: #faf2c8;
			}
		}
	}


	th {
		background-color: #dce9f9;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
		.gradient (top , #ebf3fc , #dce9f9);
		text-align: center;
		border-top: none;
		box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
		&:first-child {
			border-radius: 6px 0 0 0;
		}

		&:last-child {
			border-radius: 0 6px 0 0;
		}

		&:only-child {
			border-radius: 6px 6px 0 0;
		}
	}

	td:first-child , th:first-child {
		border-left: none;
	}

	tfoot td {
		text-align: right;
	}
}

.transition (@t) {
	-webkit-transition: @t;
	-moz-transition: @t;
	-ms-transition: @t;
	-o-transition: @t;
	transition: @t;
}

.transition_withTransform (@t) {
	-webkit-transition: -webkit-transform @t;
	-moz-transition: -moz-transform @t;
	-ms-transition: -moz-transform @t;
	-o-transition: -o-transform @t;
	transition: transform @t;
}

.transform (@t) {
	-webkit-transform: @t;
	-moz-transform: @t;
	-ms-transform: @t;
	-o-transform: @t;
	-transform: @t;
}

.heightFx () {
	.transition (300ms height ease-out);
}

.widthFx () {
	.transition (200ms width ease-out);
}

.leftFx () {
	.transition (200ms left linear);
}

// 解决使用CSS动画时闪烁的问题
// http://ued.taobao.com/blog/2012/01/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/
.fixTransitionFlash () {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

// 解决高度塌陷的问题 – 清除浮动 或叫 闭合浮动
// http://www.iyunlu.com/view/css-xhtml/55.html
// http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/
// 强制换行
.forceBreak () {
	word-wrap: break-word;
	word-break: break-all;
}

.giveHeight () {
	overflow: hidden;
	zoom: 1;
}

// 透明度
.imgOpacityShow (@time: 300ms) {
	.transition (opacity @time ease-in);
}

// 旋转角度
.rotate (@ro: 30deg) {
	.transform (rotate(@ro));
}

// 渐变
.gradient (@direction , @startColor , @endColor) {
	background-image: -webkit-linear-gradient(@direction, @startColor, @endColor);
	background-image: -moz-linear-gradient(@direction, @startColor, @endColor);
	background-image: -ms-linear-gradient(@direction, @startColor, @endColor);
	background-image: -o-linear-gradient(@direction, @startColor, @endColor);
	background-image: linear-gradient(@direction, @startColor, @endColor);
}

// 渐变
.gradient (@direction , @startColor , @midColor , @endColor) {
	background-image: -webkit-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: -moz-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: -ms-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: -o-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: linear-gradient(@direction, @startColor, @midColor, @endColor);
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	40% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}

	40% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fade-out {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade-out-hide {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		display: none;
	}
}

.fadeIn (@duration) {
	animation: fade-in;
	animation-duration: @duration;
	-webkit-animation: fade-in @duration;
}

.fadeOut (@duration) {
	animation: fade-out-hide;
	animation-duration: @duration;
	-webkit-animation: fade-out-hide @duration;
}

.aj-p , .aj-text, .ajaxjs-text-p {
	color: #333;
	line-height: 160%;
	margin: 15px 0;
	font-size: .95rem;
	letter-spacing: 1px;
	text-align: justify;
}

p.aj-note {
	font-size: .9rem;
	border: 1px solid lightgray;
	border-radius: 3px;
	background-color: #eee;
	padding: 2% 10%;
	text-align: left;
	width: fit-content;
    margin: 2% auto;
}
.ajaxjs-text-quotation {
	color: gray;
}

.ajaxjs-text-quotation:before {
	content: '‟';
	font-size: 3rem;
}

.ajaxjs-text-quotation:after {
	content: '”';
	font-size: 3rem;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

// 图片容器
.ajaxjs-imgHolder {
	position: relative;
	overflow: hidden;
	min-height: 70px;
	background: no-repeat center top url('');
	background-size: 110% 80%;
	img {
		width: 100%;
		height: 100%;
		vertical-align: top;
	}

	h3 , h4 {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 25px;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 1%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		color: white;
	}

	.m_checkbox {
		width: 20px;
		height: 20px;
		border: 5px solid rgba(0, 255, 0, .5);
		border-right-width: 2px;
		border-bottom-width: 2px;
		position: absolute;
		top: 5px;
		right: 5px;
	}

	.m_selected {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 25px;
		height: 25px;
		background: no-repeat url();
		background-size: 100%;
	}
}

// 箭头 父容器必须 position: relative;
.aj-arrow {
	position: absolute;
	&:after , &:before {
		position: absolute;
		border: 5px solid transparent;
		content: ' ';
		height: 0;
		width: 0;
	}

	&.toTop {
		top: -1px;
		&:after {
			border-bottom-color: #fffce9;
			bottom: -1px;
		}

		&:before {
			border-bottom-color: #ffcc9e;
			bottom: 0;
		}
	}

	&.toBottom {
		bottom: -8px;
		&:after {
			border-top-color: #fffce9;
			bottom: -1px;
		}

		&:before {
			border-top-color: #ffcc9e;
			bottom: -2px;
		}
	}

	&.toLeft {
		left: -9px;
		&:after {
			top: 5px;
			border-right-color: #fffce9;
		}

		&:before {
			border-right-color: #ffcc9e;
			top: 5px;
			left: -2px;
		}
	}

	&.toRight {
		right: 0;
		&:after {
			top: 5px;
			border-left-color: #fffce9;
		}

		&:before {
			border-left-color: red;
			top: 5px;
		}
	}
}

.tipsNote {
	line-height: 20px;
	color: #ff865d;
	border: solid 1px #ffcc9e;
	background-color: #fffce9;
	padding: 8px 12px;
	width: 70%;
	border-radius: 3px;
	margin-top: 10px;
	font-size: .8rem;
	box-sizing: border-box;
	position: relative;
	text-align: left;
}

.single_tips , .tipsNote2 {
	position: fixed;
	background-color: #f5faff;
	border: 1px solid #0066cc;
	font-size: .9rem;
	border-radius: 3px;
	color: #0066cc;
	padding: 7px 12px 8px 12px;
	margin-left: 10px;
	.aj-arrow:after {
		border-right-color: #f5faff;
	}

	.aj-arrow:before {
		border-right-color: #0066cc;
	}
}

.aj-mask {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

.aj-tableList {
	header {
		background-color: #f7f8fa;
		font-weight: bold;
		margin-bottom: 2%;
		height: 37px;
		line-height: 10px;
		& > div {
			display: inline-block;
			padding: 1% 0;
			text-align: center;
			box-sizing: border-box;
		}
	}

	ul {
		li {
			padding: 2% 0;
			border-bottom: 1px solid #eee;
			font-size: .9rem;
			text-align: left;
			& > div {
				display: inline-block;
				vertical-align: middle;
				text-align: center;
				img {
					vertical-align: middle;
				}
			}
		}
	}

	.aj-page-list footer {
		margin-top: 30px;
	}
}

.aj-pc-list-1 {
	& > ul {
		padding: 2%;
		li {
			border:1px solid #cececd;
			border-bottom: 3px solid #cececd;
			border-right: 1px solid #cececd;
			margin: auto;
			margin-bottom: 3%;
			display: block;
			overflow: hidden;
			clear: both;
			background-color: white;
			padding: 2%;
			box-sizing: border-box;
			.thumb{
				min-height:90px;
				float: left;
				margin-right:20px;
			}
			&:nth-child(odd) {
			  background-color:#F5F5F5;
			}
			h3 {
				padding-bottom: 2%;
				font-weight: bold;
				letter-spacing: 2px;
			}

			p {
				font-size: .9rem;
				text-align: justify;
				line-height: 180%;
				color: gray;
			}
			
			img{
			    display: inline-block;
			    max-width: 200px;
			    float: left;
			    margin-right: 2%;
			}

			div {
				font-size: .9rem;
				text-align: right;
				color: gray;
				margin-top: 1%;
				a {
					font-weight: bold;
					color: gray;
				}
			}
		}
	}

	.pageInfo {
		text-align: center;
		font-size: 1rem;
		.info {
			color: gray;
		}
	}
}
.aj-pc-list-2 {
	& > ul {
		clear:both;
		overflow:hidden;
		li {
			float:left;
			width:47%;
			border:1px solid #cececd;
			border-bottom: 3px solid #cececd;
			border-right: 1px solid #cececd;
			margin: 3% 3% 0 0;
			display: block;
			overflow: hidden;
			background-color: white;
			padding: 2%;
			box-sizing: border-box;
			height:230px;

			h3 {
				padding-bottom: 2%;
				font-weight: bold;
				letter-spacing: 2px;
			}

			p {
				font-size: .9rem;
				text-align: justify;
				line-height: 180%;
				color: gray;
			}

			div {
				font-size: .9rem;
				text-align: right;
				color: gray;
				margin-top: 1%;
				a {
					font-weight: bold;
					color: gray;
				}
			}
		}
	}

	.pageInfo {
		text-align: center;
		font-size: 1rem;
		.info {
			color: gray;
		}
	}
}

.aj-article-info {
	margin:0 0 3% 0;
	
	article {
		h1 {
			text-align: center;
			font-size: 1.8rem;
			padding: 3% 0;
			letter-spacing: 3px;
		}

		h2 {
			font-weight: bold;
			text-align: left;
			font-size: 1.1rem;
			padding: 1% 0;
		}

		h4 {
			text-align: right;
			color: gray;
			padding-bottom:2%;
			font-size: .95rem;
		}

		p {
			.ajaxjs-text-p;
			text-indent: 2em;
		}
		li{
			.ajaxjs-text-p;
			list-style-type: inherit;
			margin-left:3%;
		}
		pre{
			    
    			overflow-x: auto;
				white-space: pre-wrap;
		}
		img {
			
			max-width: 80%;
			margin: 2% auto;
			display: block;
			&.right {
				float: right;
				max-width: 38%;
				margin: 2px 20px 0 10px;
			}

			&.left {
				float: left;
				max-width: 38%;
				margin: 2px 20px 0 0;
			}
		}
	}
	.neighborRecord{
		clear: both;
		padding:5% 0;
	}
}

footer.aj-footer-1 {
	text-align: center;
	color: gray;
	font-size: .9rem;
	padding: 2% 0;
	clear: both;
}
fieldset.aj-fieldset {
	border-radius:5px;
	border:1px solid gray;
	padding: 2%;
	margin:1% 0;
	legend {
		font-weight:bold;
		letter-spacing:2px;
	}
	li {
		list-style: disc;
    	list-style-position: inside;
	}
}

.aj-pager{
	&.in-one-line .info{
		display: inline-block;
	}
	form {
		display: inline-block; vertical-align: bottom;
	}
	input{
		.aj-input;
		text-align: center; 
		width: 40px; 
		height: 22px; 
		float: none;
	}
	select{
		.aj-select;
		width:50px;
		text-align: center;
		height: 22px;
	}
}

// 隐藏 ReCAPTCHA 图标
.grecaptcha-badge { 
	display: none; 
}